<script lang="ts" setup>
import useFollow from "@/hooks/useFollow.ts";
import type { Doctor } from "@/types/homeTypes";

const props = defineProps<{ item: Doctor }>();

const { follow, loading } = useFollow();
const handleFloow = () => {
    follow("doc", props.item.id);
    props.item.likeFlag = props.item.likeFlag === 1 ? 0 : 1;
};
</script>
<template>
    <div class="doctor-card">
        <van-image round :src="item.avatar" />
        <p class="name">{{ item.name }}</p>
        <p class="van-ellipsis">{{ item.hospitalName }} {{ item.depName }}</p>
        <p class="title">{{ item.positionalTitles }}</p>
        <van-button round size="small" type="primary" @click="handleFloow" :loading="loading">{{ item.likeFlag === 1 ? "已关注" : "+ 关注" }}</van-button>
    </div>
</template>

<style scoped lang="scss">
.doctor-card {
    width: 135px;
    height: 190px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0px 0px 11px 0px rgba(229, 229, 229, 0.2);
    text-align: center;
    padding: 15px;
    margin-left: 15px;
    display: inline-block;
    box-sizing: border-box;

    > .van-image {
        width: 58px;
        height: 58px;
        vertical-align: top;
        border-radius: 50%;
        margin: 0 auto 8px;
    }

    > p {
        margin-bottom: 0;
        font-size: 11px;
        color: var(--cp-tip);

        &.name {
            font-size: 13px;
            color: var(--cp-text1);
            margin-bottom: 6px;
        }

        &.title {
            margin-top: 6px;
        }
    }

    > .van-button {
        padding: 0 12px;
        height: 28px;
        margin-top: 8px;
        width: 72px;
    }
}
</style>
